
import { mapGetters, mapMutations, mapActions } from 'vuex'
import { playMode } from 'common/js/config'
import { shuffle } from 'common/js/util'

export const playlistMixin = {
  computed: {
    ...mapGetters(['playlist'])
  },

  mounted () {
    this.handlePlaylist(this.playlist)
  },

  activated () {
    this.handlePlaylist(this.playlist)
  },

  watch: {
    playlist (newVal) {
      this.handlePlaylist(newVal)
    }
  },

  methods: {
    handlePlaylist () {
      // 我们的组件必须要实现这个函数 在组件中定义了函数 就会覆盖 mimin里面的函数
      // 如果你的组件没有定义 handlePlaylist 这个函数 那么他就会调用mimin里面的 handlePlaylist 函数
      // 这时候我们就抛出 error 用户就会知道  需要实现这个函数
      throw new Error('component must implement handlePlaylist method')
    }
  }
}

// 公用的播放模式
export const playerMixin = {
  computed: {
    // 动态播放模式类名
    iconMode () {
      return this.mode === playMode.sequence ? 'icon-sequence' : this.mode === playMode.loop ? 'icon-loop' : 'icon-random'
    },
    ...mapGetters(['sequenceList', 'currentSong', 'mode', 'playlist', 'playing', 'favoriteList'])
  },
  methods: {
    changeMode () {
      const mode = (this.mode + 1) % 3
      this.setPlayMode(mode)
      let list = null
      if (mode === playMode.random) {
        // 如果用户点击随机播放 我们把顺序列表 sequenceList 传入 返回洗牌数组
        list = shuffle(this.sequenceList)
      } else {
        // 否则我们就是或者是循环播放顺序播放
        list = this.sequenceList
      }
      // 我们需要先改变index 要不然list已经被改变 this.currentSong 永远是0
      this.resetCurrentIndex(list, this.currentSong)
      this.setPlaylist(list)
      // 这样子的话点击播放模式当前播放的歌曲也会发生改变 我们需要改变一下当前 index
    },
    resetCurrentIndex (list, song) {
      let index = list.findIndex((item, index) => {
        return item.id === song.id
      })

      this.setCurrentIndex(index)
    },
    // 用户点击切换收藏
    toggleFavorite (song) {
      this.isFavoriteSong(song) ? this.deleteFavoriteList(song) : this.saveFavoriteList(song)
    },
    // 动态类名
    getFavoriteIcon (song) {
      return this.isFavoriteSong(song) ? 'icon-favorite' : 'icon-not-favorite'
    },
    // 判断是否收藏该歌曲
    isFavoriteSong (song) {
      let index = this.favoriteList.findIndex((item, index) => {
        return item.id === song.id
      })
      return index > -1
    },
    ...mapMutations({
      setPlaylist: 'SET_PLAYLIST',
      setPlayMode: 'SET_PLAY_MODE',
      setCurrentIndex: 'SET_CURRENT_INDEX',
      setPlayingState: 'SET_PLAYING_STATE'
    }),
    ...mapActions(['saveFavoriteList', 'deleteFavoriteList'])
  }
}

// 搜索公用部分
export const searchMixin = {
  data () {
    return {
      query: '',
      refreshDelay: 100
    }
  },
  computed: {
    ...mapGetters(['searchHistory'])
  },
  methods: {
    onQueryChange (query) {
      // console.log(query)
      this.query = query
    },
    blurInput () {
      this.$refs.searchBox.blur()
    },
    // 用户点击热门数据
    addQuery (item) {
      if (item.k) {
        this.$refs.searchBox.setQuery(item.k)
      } else {
        this.$refs.searchBox.setQuery(item)
      }
    },
    saveSearch (item) {
      // 存储在 vuex 中和 localStorage
      this.saveSearchHistory(this.query)
    },
    ...mapActions(['saveSearchHistory', 'deleteSearchHistory'])
  }
}
